<template>
	<c-base-page :current="1" :navText="'设备信息'">
		<view class="order-details">
			<view class="cards" v-if="detailData.realKpi">
				<view class="electricitys">
					<view class="item">
						<view class="desc"><view class="dot d1"></view> 总收益(元)</view>
						<view class="value">{{ detailData.realKpi.total_income }}</view>
					</view>
					<view class="item">
						<view class="desc"><view class="dot d2"></view> 累计发电量(度)</view>
						<view class="value">{{ detailData.realKpi.total_power }}</view>
					</view>
				</view>
				<view class="electricitys">
					<view class="item">
						<view class="desc"><view class="dot d3"></view> 当日收益(元)</view>
						<view class="value">{{ detailData.realKpi.day_income }}</view>
					</view>
					<view class="item">
						<view class="desc"><view class="dot d4"></view> 当日发电量(度)</view>
						<view class="value">{{ detailData.realKpi.day_power }}</view>
					</view>
					<view class="item">
						<view class="desc"><view class="dot d5"></view> 当月发电量(度)</view>
						<view class="value">{{ detailData.realKpi.month_power }}</view>
					</view>
				</view>
			</view>
			<view class="tc col_primary f14 mrgt10">电站基础信息</view>
			<uni-card class="detail-cards">
				<view class="detail-item">
					<view class="title">电站名称:</view>
					<view class="desc">{{ detailData.plantName || "--" }}</view>
				</view>
				<view class="detail-item">
					<view class="title">电站编号:</view>
					<view class="desc">{{ detailData.plantCode || "--" }}</view>
				</view>
				<view class="detail-item">
					<view class="title">组串总容量:</view>
					<view class="desc">{{ detailData.capacity || 0 }} kWp</view>
				</view>
				<view class="detail-item">
					<view class="title">电站地址:</view>
					<view class="desc">{{ detailData.plantAddress || "--" }}</view>
				</view>
				<view class="detail-item">
					<view class="title">并网时间:</view>
					<view class="desc">{{ detailData.gridConnectionDate || "--" }}</view>
				</view>
				<view class="detail-item">
					<view class="title">运行天数:</view>
					<view class="desc">{{ detailData.stationRunningDays || 0 }}</view>
				</view>
				<view class="detail-item" v-if="detailData.realKpi && detailData.realKpi.real_health_state">
					<view class="title">设备状态:</view>
					<view class="desc">{{ status[detailData.realKpi.real_health_state] }}</view>
				</view>
			</uni-card>
			<view class="tc col_primary f14">设备实时数据</view>
			<uni-card class="detail-cards" v-for="item in devices">
				<view class="inv-item">
					<view class="info fwb col0">
						<text class="mrgr5">设备名:</text>{{ item.devName }}
						<view class="unlink" v-if="item.realKpi && !item.realKpi.run_state">断链</view>
					</view>
					<view class="line"></view>
					<view class="info">设备SN号: {{ item.esnCode }}</view>
					<view class="info">设备类型: {{ getDeviceTypeDescription(item.devTypeId) }}</view>
					<view class="info">机型: {{ item.invType }}</view>
					<view class="info" v-if="item.realKpi">逆变器状态: {{ getInverterStateDescription(item.realKpi.inverter_state) }}</view>
					<view class="info" v-if="item.realKpi">运行状态: {{ getRunTypeDescription(item.realKpi.run_state) }}</view>
				</view>
			</uni-card>
		</view>
	</c-base-page>
</template>

<script>
	import moment from 'moment'
	export default {
		data() {
			return {
				status: ["全部", "断连", "故障", "正常"],
				detailData: {
					plantCode: ""
				},
				devices: []
			}
		},
		onLoad(options) {
			console.log(options)
			if (options && options.plantCode) {
				this.detailData.plantCode = decodeURIComponent(options.plantCode)
			}
			this.getDetail()
			this.getDeviceDatas()
		},
		methods: {
			getDetail() {
				if (!this.detailData.plantCode) {
					this.mxToast("未识别电站信息!")
					return false
				}
				this.httpGet({
					url: this.$apis.apiStationList + "/" + this.detailData.plantCode
				}).then(res => {
					this.detailData = res
					if (res.gridConnectionDate && moment(res.gridConnectionDate).isValid())
					this.detailData.gridConnectionDate = moment(res.gridConnectionDate).format("YYYY-MM-DD")
					this.detailData.stationRunningDays = moment().diff(moment(res.gridConnectionDate), "days") + "天"
				})
			},
			getDeviceDatas() {
				this.httpGet({
					url: `${this.$apis.apiStationDevices}?stationCode=${this.detailData.plantCode}`
				}).then(res => {
					this.devices = res
				})
			},
			getRunTypeDescription(status) {
				const runTypeDescriptions = {
					0: "断连",
					1: "连接"
				}
				return runTypeDescriptions[status] || '未知运行状态'
			},
			getDeviceTypeDescription(deviceTypeId) {
			    const deviceTypeDescriptions = {
			        1: '组串式逆变器',
			        2: '数采',
			        8: '箱变',
			        10: '环境监测仪',
			        13: '通管机',
			        16: '通用设备',
			        17: '关口电表',
			        22: 'PID',
			        37: '品联数采',
			        38: '户用逆变器',
			        39: '储能',
			        40: '并离网控制器',
			        41: 'ESS',
			        45: 'PLC',
			        46: '优化器',
			        47: '户用电表',
			        62: '通信模块',
			        63: '分布式数采',
			        70: '安全关断盒'
			    }
			    
			    return deviceTypeDescriptions[deviceTypeId] || '未知设备类型'
			},
			getInverterStateDescription(state) {
			    const stateDescriptions = {
			        0: '待机:初始化',
			        1: '待机:绝缘阻抗检测',
			        2: '待机:光照检测',
			        3: '待机:电网检测',
			        256: '启动',
			        512: '并网',
			        513: '并网:限功率',
			        514: '并网:自降额',
			        515: '离网运行',
			        768: '关机:异常关机',
			        769: '关机:指令关机',
			        770: '关机:OVGR',
			        771: '关机:通信断链',
			        772: '关机:限功率',
			        773: '关机:需手动开机',
			        774: '关机:直流开关断开',
			        775: '关机:快速关断',
			        776: '关机:输入欠功率',
			        777: '关机:NS保护',
			        778: '关机:指令快速关机',
			        1025: '电网调度:cosψ-P 曲线',
			        1026: '电网调度:Q-U 曲线',
			        1027: '电网调度:PF-U特征曲线',
			        1028: '电网调度:干接点',
			        1029: '电网调度:Q-P特征曲线',
			        1280: '点检就绪',
			        1281: '点检中',
			        1536: '巡检中',
			        1792: 'AFCI自检',
			        2048: 'IV扫描中',
			        2304: '直流输入检测',
			        2560: '脱网充电',
			        40960: '待机:无光照',
			        40961: '待机:直流无输入',
			        45056: '通信断链(SmartLogger写入)',
			        49152: '载入中(SmartLogger写入)'
			    }
			    return stateDescriptions[state] || '未知状态'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order-details {
		padding-bottom: 180rpx;
		.cards {
			margin-top: 10px;
			padding: 0 10px;
		}
		.electricitys {
			display: flex;
			justify-content: space-between;
			background: #ffffff;
			.item {
				flex: 1;
				margin: 20rpx 10rpx 10rpx;
				padding: 20rpx 10rpx;
				text-align: center;
				border-radius: 10rpx;
				border: 1px solid #EBEEF5;
				box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.08);
				.desc {
					font-size: $uni-font-size-base - 5rpx;
					color: #999;
				}
				.dot {
					display: inline-block;
					width: 6px;
					height: 6px;
					border-radius: 6px;
					margin-right: 5px;
				}
				.d1 {
					background: #55aaff;
				}
				.d2 {
					background: #67c23a;
				}
				.d3 {
					background: #e6a23c;
				}
				.d4 {
					background: #aa55ff;
				}
				.d5 {
					background: #4be2e2;
				}
				.value {
					font-size: $uni-font-size-base + 2rpx;
					font-weight: bold;
					line-height: 2;
				}
			}
		}
	}
	.order-detail-tops {
		.titles {
			padding: 25rpx;
			.title {
				font-size: 50rpx;
				font-weight: bold;
			}
			.title.active {
				color: #55aaff;
			}
			.extra {
				font-size: 26rpx;
				color: #999;
				padding-top: 15rpx;
			}
		}
	}
	.section-title {
		margin: 20rpx 0 0 30rpx;
		padding-left: 12rpx;
		border-left: 5px solid #55aaff;
		font-size: 36rpx;
		height: 36rpx;
		line-height: 34rpx;
		font-weight: bold;
	}
	.detail-cards {
		.detail-item {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #666;
			padding: 20rpx 0;
			image {
				margin-right: 14rpx;
				width: 36rpx;
				height: 36rpx;
			}
			.title {
				font-weight: bold;
			}
			.desc {
				margin-left: 20rpx;
				flex: 1;
				color: #999;
				overflow: hidden;
				text-align: right;
				font-size: 26rpx;
			}
		}
		.show-more {
			margin: 20rpx 0;
			text-align: center;
		}
		.show-more image {
			width: 14rpx;
			height: 25.2rpx;
			margin: 6rpx 0 0 10rpx;
			transform: rotate(90deg);
		}
		.show-more.up image {
			transform: rotate(-90deg);
		}
		.inv-item {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.title, .desc {
				flex: 1;
				min-width: 50%;
				max-width: 50%;
			}
			.desc{
				text-align: right;
			}
			.line {
				margin: 15rpx 0;
				width: 100%;
				border-bottom: 1px solid #eee;
			}
			.info {
				position: relative;
				min-width: 100%;
				max-width: 100%;
			}
			.unlink {
				position: absolute;
				padding: 4rpx 10rpx;
				background: #f3f3f3;
				color: #ff6600;
				border-radius: 6rpx;
				top: -5rpx;
				right: 0;
				font-size: 12px;
			}
		}
	}
	.tabars {
		width: 100%;
		position: fixed;
		padding-top: 6rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom));
		padding-bottom: calc(env(safe-area-inset-bottom));
		bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		border-top: 1px solid #f5f5f5;
		.tab_btn {
			flex: 1;
			text-align: center;
			font-size: 26rpx;
		}
	}
</style>
